<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" /> 
	<title>React State</title>
	<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
	<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>

	<div id="example"></div>

	<script type="text/babel">
        class Demo extends React.Component {
            // 如果state写在构造器里面，那么得写生this.state
            // 类里面只有两种方式：定义函数， 赋值语句(前面不能写this)
            state = {isHot: true, data: [1, 2, 3]};

            // constructor() {
            //     super()
            //     this.handleClick = this.handleClick.bind(this)
            // }
           
            // handleClick () {
            //     console.log("被点击了2");
            //     // 因为类中的方法只能被实例调用(与react无关，es6这么玩的), 但是当前函数赋值给了onClick
            //     // 所以函数内this就会丢失
            //     const isHot = !this.state.isHot;
            //     this.setState({isHot});
            // }

            handleClick = ()=> {
                console.log("被点击了1");
                const isHot = !this.state.isHot;
                this.setState({isHot});
            }

            render() {
                return <h2 onClick={this.handleClick}>
                    今天天气：{this.state.isHot ? "炎热":"凉爽"}					
                </h2>;
            }
        }
        
		ReactDOM.render(<Demo />, document.getElementById('example'));
	</script>

</body>

</html>